<template>
<draggable class="attachments-list upload-list" tag="ul" v-model="listShow" @drop.native.stop.prevent="" @start='onDragleave' @end="onDragover">
	<template v-for="(item,index) in [...progress, ...listShow]">
    <li class="uploader-item" :class="{'uploader-item__hover':item.percentage}" :key="index">
      <div class="uploader-wrapper">
        <div class="uploader-content">
          <div class="file-item" v-if='item.percentage' style="background:rgba(0,0,0,0.3);">
            <el-progress class="circle" type="circle" :stroke-width='12' :percentage="item.percentage" status="success" :show-text='false'></el-progress>
          </div>
          <div class="file-item" v-else>
            <img class="icon-img" @dragstart="(e)=>e.preventDefault()" v-if="item.suffix==='png'||item.suffix==='jpg'||item.suffix==='jpeg'||item.suffix==='gif'" :src="item.url" alt="">
            <iconItem v-else class="icon" style="margin-right:auto;width:40px;height:40px" :icon='item'></iconItem>
            <div class="uploader-handlers">
              <i class="V7_iconfont V7_iconV7tubiao_kejian-weixuan pointer" @click="preview(item)"></i>
              <a class="V7_iconfont V7_iconV7tubiao_xianxiazai pointer" :href="item.url.replace('http://', 'https://') + '?attname=' + item.fileName" v-if="!isHiddenDowBtn" download target="_blank"></a>
              <i class="V7_iconfont V7_iconV7tubiao_shanchu pointer" @click="remove(item)" v-if="!isHiddenDelBtn"></i>
            </div>
          </div>
        </div>
        <div class="file-item-content ellipsis">
          {{item.name}}.{{item.suffix}}
        </div>
      </div>
    </li>
	</template>
</draggable>
</template>
<script lang="ts">
import { Component, Vue, Watch, Ref, Prop } from 'vue-property-decorator';
import { types } from '@/afterSales/utils/common';
import iconItem from '../icon/iconItem.vue';
import draggable from 'vuedraggable';
interface Item {
  url: string;
  fileName: string;
  createTime: string;
}
@Component({
  name: 'uploadList',
  components: { iconItem, draggable }
})
export default class extends Vue {
  [x: string]: any;
  @Prop({ default: false }) private isHiddenDelBtn!: boolean;
  @Prop({ default: true }) private isHiddenUploadBtn!: boolean;
  @Prop({ default: () => [] }) private list!: any[];
  @Prop({ default: () => [] }) private progress!: any;
  @Prop({ default: false }) private isHiddenPreBtn!: any;
  @Prop({ default: false }) private isHiddenDowBtn!: any;
  private typeList: string[] = [];
  private get listShow () {
    return (this.list || []).map(({ fileName, url }) => {
      const dot = fileName.lastIndexOf('.');
      const name = fileName.slice(0, dot);
      const suffix = fileName.slice(dot + 1).toLowerCase();
      let type = 'noKnow';
      this.typeList.some((item) => {
        if (types[item].includes(suffix)) {
          type = item;
          return true;
        }
      });
      return { name, type, url, suffix, fileName };
    });
  }

  private set listShow (val) {
    const arr = []as any;
    val.forEach((ele) => {
      arr.push(this.list.find((value) => value.url === ele.url));
    });
    this.$emit('updateValue', arr);
  }

  private remove (item) {
    this.$emit('remove', item);
  }

  private uploadAgin () {
    this.$emit('uploadAgin');
  }

  private beforeMount () {
    this.typeList = Object.keys(types);
  }

  // 预览
  private preview (val) {
    const preview = this.$ImgPrview({
      list: this.listShow,
      img: val,
      isHiddenDelBtn: this.isHiddenDelBtn
    }).then((obj) => {
      console.log(obj.value);
      this.$emit('remove', obj.value);
    });
  }

  // 拖拽移出监听
  private onDragleave (event) {
    this.$emit('userOnDrag', true);
  }

  private onDragover (event) {
    this.$emit('userOnDrag', false);
  }
}
</script>
<style lang="stylus" scoped>
.V7_iconV7tubiao_xianxiazai {
	margin: 0px 8px
}
.file-item-content {
	padding: 8px 9px;
	background: #f1f8fd;
	border-radius: 4px;
	color: #008bee;
	display: inline-block;
	margin: 0px 10px 10px 0px;
	line-height: 20px;
	width: 100%
}
.attachments-list {
	margin 0
	// overflow-y auto
	display flex
	flex-wrap wrap
	// max-height 400px
	.uploader-item {
		width 110px
		padding-bottom 150px
		height 0
		position relative
		.uploader-wrapper {
			position absolute
			top 0
			left 0
			width 100px
			height 100px
			margin 8px
			.uploader-content {
				width 100%
				padding-bottom 100%
				height 0
				background rgba(0, 0, 0, 0.03)
				border-radius 4px
				position relative
				.file-item {
					position absolute
					top 0
					left 0
					width 100%
					height 100%
					.circle {
						position absolute
						top 0
						left 0
						right 0
						bottom 0
						margin auto
						width 25px
						height 25px
						/deep/.el-progress-circle {
							width 25px !important
							height 25px !important
						}
					}
					.icon {
						position absolute
						top 0
						left 0
						right 0
						bottom 0
						margin auto
					}
					.icon-img {
						width 100%
						height 100%
						object-fit cover
						border-radius 4px
					}
					&:hover {
						background linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%)
						.uploader-handlers {
							display flex
						}
						&:before {
							content ''
							position absolute
							top 0
							left 0
							width 100%
							height 100%
							background linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%)
						}
					}
					.uploader-handlers {
						position absolute
						bottom 0
						left 0
						top: 50%
						width 100%
						height 25px
						display none
						justify-content: center;
            color: #fff;
						.iconfont {
							flex 1
							color #fff
							text-align center
							&:hover {
								color #1E63F5
							}
						}
					}
				}
			}
			.file-item-content {
				text-align center
				margin-top 8px
				color #000000
				opacity 0.8
				line-height 16px
			}
		}
	}
}
</style>
